<template>
  <IonPage>
    <IonContent>
      <div class="main">
        <p>设置</p>
        <ul>
          <p>普通</p>
          <li>
            深色模式<IonToggle
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
          <li>
            深色模式<IonToggle
              ref="toggleButton"
              class="toggle"
              color="dark"
              @click="changeConfigState"
              :checked="configDate.isDarkMode"
            ></IonToggle>
          </li>
        </ul>
      </div>
    </IonContent>
  </IonPage>
</template>
<style scoped lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  p {
    font-size: 7vw;
    text-align: center;
  }
  ul {
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    li {
      width: 90%;
      padding: 2vh 2vw;
      /* margin-left: 10vw; */
      /* margin-right: 5vw; */
      font-size: 5vw;
      border: 0.7vw solid black;
      border-radius: 5vw;
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 0.5vh;
      .toggle {
        /* padding: 10px; */
        --handle-height: 10vw;
        --handle-width: 10vw;
        --handle-background: lightblue;
        --handle-background-checked: #ffffff;
        --handle-border-radius: 22vw;
        position: absolute;
        right: 2vw;
        &::part(track) {
          width: 20vw;
          height: 4vh;
          background-color: aliceblue;
        }
      }
    }
    p {
      width: 100%;
      font-size: 7vw;
      text-align: left;
      font-weight: bold;
      border-bottom: 0.5vw dashed black;
      /* padding: 30px; */
    }
  }
  button {
    height: 30px;
  }
}

</style>

<script lang="ts" setup>
import { IonContent, IonPage, IonToggle } from "@ionic/vue";
// obj类型配置文件
import configFile from "@/assets/configs/config.json";
import { configDataInter } from "@/types";
import { reactive, ref } from "vue";
import { Preferences } from "@capacitor/preferences";

let configDate = ref(configFile);
console.log();

// 创建本地存储数据
const creatConfig = () =>
  Preferences.set({
    key: "config",
    value: JSON.stringify(configFile),
  });
// 获取本地存储的值
const getConfig = () =>
  Preferences.get({
    key: "config",
  }).then((e) => {
    if (e === null) {
      // 如果为null类型，创建配置文件，重新读取
      creatConfig();
      getConfig();
    } else {
      Object.assign(configDate, JSON.parse(e.value as string));
      console.log(96);
      console.log(configDate);
    }
  });
const setConfig = () =>
  Preferences.set({
    key: "config",
    value: JSON.stringify(configDate),
  });
getConfig();
const changeConfigState = () => {
  if (configDate.value.isDarkMode === true) {
    configDate.value.isDarkMode = false;
    console.log(configDate);
  } else {
    configDate.value.isDarkMode = true;
  }
};
</script>
